import React from 'react';
import styled from '@emotion/styled';
import { CloseOutlined } from '@ant-design/icons';

interface PdfPreviewProps {
	pdfUrl: string;
	onClose: () => void;
}
const PdfPreviewContainer = styled.div`
		.mobile {
			width: 100%;
			height: 100%;
			z-index: 1;
			position: fixed;
			top: 0;
			left: 0;
			background-color: #000;
		}

		.imgIframe-box {
			width: 100%;
			height: 100%;
		}
	`;

const CloseIcon = styled(CloseOutlined)`
		position: absolute;
		right: 10px;
		top: 10px;
		color: #fff;
		font-size: 24px;
		z-index: 1;
		cursor: pointer;
	`;
const PdfPreview: React.FC<PdfPreviewProps> = ({ pdfUrl, onClose }) => {
	return (
		<PdfPreviewContainer>
			<div className="mobile">
				<iframe src={pdfUrl} frameBorder="0" scrolling="auto" className="imgIframe-box"></iframe>
				<CloseIcon onClick={onClose} />
			</div>
		</PdfPreviewContainer>
	);
};

export default PdfPreview;
